<template>
	<view>
	
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?`text-${selectedColor} cur`:''" v-for="(item,index) in list" :key="index" @tap="tabSelect" :data-id="index">
			 {{item[`${tabKey}`]}} 
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	const app = getApp();
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const emit = defineEmits(['click', 'show']);
	const props = defineProps({
		list: {
			type: Array
		},
		tabKey: {
			type: String
		},
		selectedColor: {
			type: String,
			default: 'blue',
			validator(value) {
				// 组件校验
				//console.log(value)
			}
		},
	})
	const TabCur = ref(0);
	const scrollLeft = ref(0);
	// 选择
	function tabSelect(e) {
		TabCur.value = e.currentTarget.dataset.id;
		scrollLeft.value = (e.currentTarget.dataset.id - 1) * 60
		emit('click', TabCur.value)
	}
</script>
<style>
	@import "../../lib/main.css";
	@import "../../lib/icon.css";
	@import "../../lib/common.css";
</style>
